// window页面加载事件
window.addEventListener('load', function () {
    // 1. 顶部导航页面滑动大于80像素时候，会改为固定定位
    // 2. 点击顶部导航部分模块，页面会滑动到对应区域
    // 3. 点击顶部小模块，底部的黑色线条会滑动到对应区域
    // 4. 页面滑动到大模块对应区域，顶部的黑色线条也会滑动到部分区域
    // 1. 顶部导航页面滑动大于80像素时候，会改为固定定位
    // 获取顶部导航
    const topNav = document.querySelector('.productnav')
    // console.log(topNav)
    window.addEventListener('scroll', function () {
        // console.log('滚咯')
        if (document.documentElement.scrollTop > 80) {
            // console.log('滚咯')
            topNav.classList.add('fixed')
            bigs[0].style.marginTop = topNav.clientHeight + 80 + 'px'
        } else {
            topNav.classList.remove('fixed')
            bigs[0].style.marginTop = '0px'
        }

        // 4. 页面滑动到大模块对应区域，顶部的黑色线条也会滑动到部分区域
        for (let i = 0; i < bigs.length; i++) {
            if (document.documentElement.scrollTop >= bigs[i].offsetTop - topNav.clientHeight) {
                line.style.transform = `translate(${lis[i].offsetLeft}px)`
                line.style.width = this.clientWidth + `px`
                // line.style.width = `${lis[i].style.width}`
                // line.style.transform = `translate(${lis[i].offsetLeft})`
            }
        }

    })

    // 2. 点击顶部导航部分模块，页面会滑动到对应区域
    // 获取每一个li
    const lis = document.querySelectorAll('.productnav-item')
    // 获取每一个大盒子
    const bigs = document.querySelectorAll('.js-scroll-magic')
    // console.log(bigs)
    // 获取line盒子
    const line = document.querySelector('.line')
    // console.log(lis)
    // 遍历lis 给每个li添加点击事件
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function (e) {
            console.log(e.target)
            // 3. 点击顶部小模块，底部的黑色线条会滑动到对应区域
            line.style.transform = `translate(${e.target.offsetLeft}px)`
            line.style.width = this.clientWidth + `px`
            // line.style.transform = `translate(${lis[i].offsetLeft})`
            // console.log('xixi点我咯')
            // if (i = 1) {
            //     document.documentElement.scrollTop = (bigs[1].offsetTop + 80)
            // }
            document.documentElement.scrollTop = (bigs[i].offsetTop - topNav.clientHeight)
        })
    }
})